<html>

<head>
    <meta charset="utf8">

    <link rel="stylesheet" type="text/css" href="node_modules/select2/dist/css/select2.css" /> 
</head>

<body>
    <div id="app">
    <div>
        {{message}}
        <!---->
        
        <select style="width:200px"
                v-select2="options"
                v-on:change="change($event)">
               
        </select> 
    </div>
    <div>
        <wimi-demo-component datas="datas" ref="demo">我是标签内部</wimi-demo-component>
    </div>

    <div>
        <wimi-select2 v-bind:datas="datas" 
        v-on:change="wimiSelect2Change"
        v-model="selected"></wimi-select2>
    </div>

    </div>
    
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/select2/dist/js/select2.full.js"></script>
    <script src="node_modules/select2/dist/js/select2.js"></script>
    <script>

        Vue.directive('select2',{
            twoWay:true,
            priority:1000,
            inserted:function(el,binding){
                console.log('dd',binding);    
                var options = binding.value || {};


                $(el).select2(options)
                .on("select2:select", (e) => {
                    var data=$(el).select2("data");
                    console.log('data',data);
                    var event=new Event('change', { target: e.target });
                    event.eventData=data;// 增加自定义事件数据
                    el.dispatchEvent(event);
		        });
            },
            update:function(el,binding){
                    var options = binding.value || {};

                    $(el).select2().empty()
                    $(el).select2(options);
                
            },
            unbind:function(el,binding){
                $(el).select2().destroy();
            }
        });

        Vue.component('wimiSelect2',{
            template: '<select style="width:200px"></select>',
            props: ['datas','value'],
            mounted:function(){
                 var vm = this;
                 
                 $(vm.$el).select2({
                     data:this.datas
                 })//.select("")
                .on("select2:select", (e) => {
                    var data=$(vm.$el).select2("data");
                    
                    vm.$emit('change', data);
                    
		        });  

                $(vm.$el).select2('val', this.value);

            },
            watch:{
                value:function(){
                    console.log('watch value',this.value);
                    
                    $(this.$el).select2('val', this.value);    

                },
                datas:function(){
                    
                    $(this.$el).select2().empty()
                    $(this.$el).select2({ data: this.datas });
                    $(this.$el).select2('val', this.value);
                }
            },
            destroyed: function () {
                 $(this.$el).off().select2('destroy')
            }
        });

        Vue.component('wimiDemoComponent', {
            template: '<div>A custom component! {{datas.length}}<div><slot></slot></div></div>',
            props: ['datas'],
            mounted:function(){
                 var vm = this;
                 console.log(vm.$el);
            },
            methods: {
                // 组件方法    
                greet: function (msg) {    
                    console.log(msg);    
                }    
            }    
        })

        $().ready(function(){

            console.log('测试');


            var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

            var vmData={
                message:"hello world",
                datas:data,
                selected:[4],
                options:{
                    placeholder:'请选择',
                    data:data
	            },
                change:function(event){
                    console.log('触发改变',event);
                },
                wimiSelect2Change:function(data){
                    console.log('触发改变',data);
                    console.log('触发改变 selected',vmData.selected);
                }
            };

            var vm=new Vue({
                el:"#app",
                data:vmData,
                methods:{
                    hello:function(){
                        console.log('APP HELLO');
                        console.log('this.$refs',this.$refs);      
                    }
                }
            });

            setTimeout(function(){
                console.log('5s后执行');

                vmData.options.data=[
                    { id: 0, text: 'IE' }, 
                    { id: 1, text: '火狐' }, 
                    { id: 2, text: '谷歌' }
                    ];

                vmData.selected=[3];

            },5000);


            setTimeout(function(){
                console.log('10s后执行');

                
                vmData.datas=[
                    { id: 0, text: 'IE' }, 
                    { id: 1, text: '火狐' }, 
                    { id: 2, text: '谷歌' }
                    ];
                    vmData.selected=[1];
                

            },10000);

            setTimeout(function(){
            //    vm.hello();
                console.log('vm.$refs',vm.$refs);
                vm.$refs.demo.greet('我来了');
            },3000);


        });
    </script>
</body>

</html>